<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>--%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>幸运乐翻天</title>
    <link href="/static/css/app.css?time=<%=System.currentTimeMillis()%>" rel="stylesheet">
</head>

<body>
<div id="app" class="bg">
    <jsp:include page="top.jsp"/>
    <div class="continer">
        <div class="home">
                <div class="header">
                    <div class="info"></div>
                </div>
            <div class="center">
                <div class="bgdesc">
                    <div class="l7"></div>
                    <div class="ling"></div>
                    <div class="zhi"></div>
                </div>
                <div class="info"></div>
            </div>
            <div class="footer">
                <div class="actions">
                    <div class="counter">
                        <c:forEach items="${counterList}" var="counter" varStatus="status">
                            <c:if test="${status.index == 0}">
                                <div class="item item${counter} active" data="${counter}"></div>
                            </c:if>
                            <c:if test="${status.index != 0}">
                                <div class="item item${counter} " data="${counter}"></div>
                            </c:if>

                        </c:forEach>
                    </div>
                    <a class="btn" id="toFlip"></a>
                </div>
                <div class="malert" id="noMoney">
                    <div class="dialog-cover" style="display: none;"></div>
                    <div class="alertC" style="display: none;">
                        <div class="duisuc" style="display: none;"><span class="closeBtn"></span>
                            <div class="text">
                                余额不足请先充值
                            </div>
                            <button type="button" name="button" class="sucbtn">充值</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="malert" id="gzalert">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="guanzhu"><span id="guanzhu-code-close" class="closeBtn"></span>
                        <div class="mcontent">
                            <div class="code"><img src="/static/img/code.jpg" alt="关注我" style="width: 100%;height: 100%;"></div>
                            <div class="mkey">
                                “关注公众号”
                            </div>
                            <div class="desc">
                                立即领取<span class="mcolor">&nbsp;&nbsp;3&nbsp;&nbsp;元现金红包</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="malert" id="gzjiangalert">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="guanzhu"><span name="guanzhu-award-close" class="closeBtn"></span>
                        <div class="mcontent">
                            <div class="mkey">
                                “恭喜您获得<span class="mcolor">3元现金</span>”
                            </div>
                            <div class="desc">
                                已经自动充值30乐豆
                            </div>
                            <div  name="guanzhu-award-close" class="jiang"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="FlipCard" style="display: none">
                <div class="header">
                    <div class="info"></div>
                </div>
            <div class="center">
                <div class="cardWapper">
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                    <div class="cardItem">
                        <div class="front flip in"></div>
                        <div class="end flip out"></div>
                    </div>
                </div>
            </div>
            <%--            <div class="footer">
                            <div class="actions">
                                <div class="counter">
                                    <div class="item item10"></div>
                                    <div class="item item50"></div>
                                    <div class="item item100"></div>
                                    <div class="item item500"></div>
                                </div>
                                <div id="totals" class="totals">
                                    5/5 翻牌机会
                                </div>
                            </div>

                        </div>--%>
            <div class="malert">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="duisuc" style="display: none;"><span class="closeBtn"></span>
                        <div class="text">
                            余额不足请先充值
                        </div> <button type="button" name="button" class="sucbtn">充值</button></div>
                </div>
            </div>
            <div class="malert" id="nojiang">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="guanzhu"><span class="closeBtn"></span>
                        <div class="mcontent">
                            <div class="mkey">
                                “很遗憾，未中奖”
                            </div>
                            <div class="jiang"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="malert" id="jiang">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="guanzhu">
                        <div class="mcontent">
                            <div class="lists">
                                <div name="win" class="item item0"></div>
                                <div name="win"  class="item item0"></div>
                                <div name="win"  class="item item0"></div>
                            </div>
                            <div class="counts">
                                <div class="num" id="winAmount"></div>
                            </div>
                            <div class="jiang"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="guide">
    <div class="step1"></div>
    <div class="step2"></div>
    <div class="step3"></div>
    <div class="step4"></div>
</div>
<div class="malert" id="infoAlert">
    <div class="dialog-cover" style="display: none;"></div>
    <div class="alertC" style="display: none;">
        <div class="gz"><span class="closeBtn"></span>
            <div class="mcontent">
                <ol>
                    <li>玩家每次下注后有5次翻牌机会，每次机会可选择一张卡片翻开，只要在会用完之前翻到三张一样的卡片即可中奖。</li>
                    <li>游戏开始后，屏幕上面会出现背面朝上的“777、铃铛、西瓜”三种图片的卡片各三张。</li>
                    <li>本游戏仅支持商城宝贝币进行投币，投币后点击“开始”进行投币。</li>
                </ol>
                <div class="biao">
                    <div class="item"><span>投注额</span> <span><i class="icon7">77*3</i></span> <span><i
                            class="iconling">铃铛*3</i></span> <span><i class="icontao">樱桃*3</i></span>
                    </div>
                    <div class="item"><span>10</span> <span>60</span> <span>30</span> <span>14</span>
                    </div>
                    <div class="item"><span>50</span> <span>300</span> <span>150</span> <span>70</span>
                    </div>
                    <div class="item"><span>100</span> <span>600</span> <span>300</span>
                        <span>140</span></div>
                    <div class="item"><span>500</span> <span>3000</span> <span>1500</span>
                        <span>700</span></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="malert">
    <div class="dialog-cover" style="display: none;"></div>
    <div class="alertC" style="display: none;">
        <div class="comfirm" style="display: none;"><span class="closeBtn"></span>
            <div class="text">
                <div class="dous"></div>
                <div class="oper"></div>
            </div>
        </div>
    </div>
</div>
<div class="malert" id="duanComfirm">
    <div class="dialog-cover" style="display: none;"></div>
    <div class="alertC" style="display: none;">
        <div class="scomfirm" style="display: none;">
            <span class="closeBtn"></span>
            <div class="text">本次游戏尚未结束，确定退出？</div>
            <button type="button" name="button" id="calChange" class="calbtn">取消</button>
            <button type="button" name="button" id="sureChange" class="sucbtn">确定</button>
        </div>
    </div>
</div>
</body>
<script src="/static/js/jquery-3.2.1.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="/static/js/home.js?time=<%=System.currentTimeMillis()%>" charset="utf-8"></script>
<script src="/static/js/index.js?time=<%=System.currentTimeMillis()%>" charset="utf-8"></script>
</html>
